<template>
  <div>
     <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- <span>课件查看</span> -->
        <!-- <el-row>
          <el-col :span="18">
             <el-input
              class="mt-1 mb-1"
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              clearable
              v-model="searchInput">
            </el-input>
          </el-col>
          <el-col :span="3"><el-button plain style="position:relative;top:3px" @click="getMainData(index,count)">查询</el-button></el-col>
        </el-row> -->

        <el-row>
          <el-col :span="8">
             <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              clearable
              v-model="searchInput">
            </el-input>
          </el-col>
          <el-col :span="2"><el-button plain @click="getMainData(index,count)">查询</el-button></el-col>
        </el-row>
       
      </div>
      
      <div>
        <el-table
          ref="multipleTable"
          :data="realData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection">
          </el-table-column>

          <el-table-column
            label="名称">
            <template slot-scope="scope">{{ scope.row.KJMC }}</template>
          </el-table-column>

          <!-- <el-table-column
            label="课件"
            width="220">
            <template slot-scope="scope">
               <img :src="scope.row.FM" @click="openvideo(scope.row.KJLJ)"  alt="" style="width: 220px;height:180px">
            </template>
          </el-table-column> -->

           <el-table-column
            label="封面">
           <template slot-scope="scope">
              <img v-if="scope.row.KJFM" :src="scope.row.KJFM" style="width: 190px;height:150px">
           </template>
          </el-table-column>

          <el-table-column
            label="介绍">
            <template slot-scope="scope">
              <div class="limit2">{{ scope.row.KJJS }}</div>
            </template>
          </el-table-column>

          <el-table-column
            label="老师">
            <template slot-scope="scope">{{ scope.row.KJZZ }}</template>
          </el-table-column>

          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button @click="handledownload(scope.row)" type="text" size="small">下载</el-button>
            </template>
          </el-table-column>

        </el-table>

        <div class="block mt-3">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage3"
            :page-size="count"
            layout="prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>

      </div>
    </el-card>
 </div>
</template>


<script>
export default {
    data() {
      return {
        realData:[],
        multipleSelection: [],
        //课件播放
        dialogVideoVisible: false,
        videosrc: "",
        //添加界面弹出层参数 
        dialogVisible: false,
        //编辑界面弹出层参数
        dialogVisible_Edit:false,
        //查看界面弹出层参数
        dialogVisible_look:false,
        //添加课件参数
        labelPosition: 'left',
        formLabelAlign: {
          MC: '',//名称
          JS:'',//介绍
          LS:'',//老师
          // FM //封面。需要调用后获取
          // LJ //课件文件地址。调用后获取
        },
        //上传图片模块必须要定义的参数
        imageUrl:'',
        videoImageUrl:'',
        fileArr:[],
        videoArr:[],
        uid:'',  // 存储在本地的uid
        editData:{
          OBJID:'', //uid 
          XWBT:'', // 课件标题
          XWFBT:'', // 课件副标题
          XWNR:'', //课件内容  
          FMTP:'' //封面图片
        },
        lookData:{
          CJR: '',
          CJSJ: '',
          JJ: '',
          OBJID: '',
          SJHM: '',
          TXTP: '',
          XSMC: '',
          XXDZ: '',
          YHLX: ''
        },
        searchInput:'',//查询
        currentPage3: 1,//当前页面，默认初始化为1
        total:100,    //分页总数
        index:0,  //自定义获取数据参数
        count:3,  // 分页长度（每页展示的数据数量） 
        coverUrl:'',//课件封面地址
        percentage:0, //上传课件进度条 ,
        OBJID:'',//编辑
        fileList:[],//显示课件
        today:'',
        // 参数日期
        dataParam:''
      }
    },

    methods: {
      /* 分页 */
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.getMainData((val-1)*this.count,this.count)
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
       /* 课件下载 */
      handledownload(row) {
        // console.log(row);
        window.location.href = row.KJLJ
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      
      /* 获取主数据，第一次进入页面加载的数据 */
      async getMainData(index,count){
        
        var params = {}
        params.ACTIONNAME = 'getKjList1';
        params.index = index;
        params.count = count;
        params.uid = this.uid;
        params.flag = 0;
        params.keywords = this.searchInput;
        params.yearandmonth=this.dataParam
        this.$get(params).then(res => {
          // window.console.log(res)
          console.log(res)
          if(res.SUCCESS){
            this.realData = res.DATA.LIST
             this.total = res.DATA.TOTAL;
          }
        })
      },
    },
    created(){
      if(this.$route.params.row){
        console.log(this.$route.params.row.KJNY);
        this.dataParam = this.$route.params.row.KJNY
        this.uid = localStorage.uid
        this.getMainData(this.index,this.count)
      }else{
        this.$router.go(-1)
      }
     
    }
  }
</script>

<style scoped>
 .text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.el-table{
  width: 600px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
/* 头像 */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .avatar-uploader-icon[data-v-3f78ccf2] {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px solid #DCDFE6;
}

.el-form-item{
  position: relative;
}
.tip{
    color: #9d0b0b;
    position: absolute;
    right: 1%;
    top: 0;
}

.el-row {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 20px 0;
}
.progressUp{
  width: 200px;
  margin-top: 10px;
  margin-left: 10%;
}
</style>